<template>
	<el-image v-for="(url, index) in src" :key="index" v-memo="[url, fit]" :src="url" :fit="fit" :style="style"
		preview-teleported hide-on-click-modal :preview-src-list="src" :initial-index="index"
		class="v-table-image"></el-image>
</template>

<script setup>
import { computed } from "vue"
import { parseKeyPath } from "/plugins/path"
const props = defineProps({
	column: {
		type: Object,
	},
	data: {},
	index: {
		type: Number,
	},
})
const src = computed(() => {
	let value = null
	if (props.column.key) {
		value = parseKeyPath(props.data, props.column.key)
	} else {
		return []
	}
	if (Array.isArray(value)) {
		return value.map(img => {
			if (typeof img === "object") {
				return img[props.column.label || "url"]
			} else if (typeof img === "string") {
				return img
			}
		})
	} else if (typeof value === "string") {
		return [value]
	}
	return []
})
const fit = computed(() => {
	if (props.column.image) {
		return props.column.image.fit || "cover"
	}
	return "cover"
})
const style = computed(() => {
	let width = "99%"
	let height = "99%"
	if (props.column.image) {
		width = props.column.image.width || width
		height = props.column.image.height || height
	}

	return {
		width,
		height,
	}
})
</script>

<script>
export default {
	name: "table-column-image",
}
</script>

<style lang="scss" scoped>
.v-table-image {
	&:not(:last-child) {
		margin-right: 6px;
	}
}
</style>
